<template>
  <div>
    <el-row>
      <el-col>
        <el-form :inline="true" :model="formInline">
          <el-form-item>
            <el-input size="mini" v-model="formInline.name" placeholder="请输入实训室名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select clearable size="mini" v-model="formInline.testBaseId" placeholder="请选择基地">
              <el-option v-for="item in testBase" :label="item.NAME" :value="item.ID"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select clearable size="mini" v-model="formInline.region" placeholder="请选择状态">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="buttonList">
      <el-col>
        <el-button :disabled="btnDisabled" type="primary" size="mini" @click="setting">设置预期绩效</el-button>
        <el-button :disabled="btnDisabled" type="primary" size="mini" @click="setting('view')">查看</el-button>
        <el-button type="danger" size="mini">启/禁用</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <el-tree accordion highlight-current :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-col>
      <el-col :span="20">
        <el-table
                :data="tableData"
                border
                @selection-change="handleSelectionChange"
                size="mini"
                style="width: 100%">
          <el-table-column
                  align="center"
                  type="selection"
                  width="55">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="NAME"
                  width="240px"
                  label="实训室名称">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="TESTBASENAME"
                  label="基地名称">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="USERNAME"
                  label="负责人">
            <template slot-scope="scope">
              {{scope.row.USERNAME ? scope.row.USERNAME : scope.row.TESTNAME}}
            </template>
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="PHONE"
                  label="联系方式">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="STATUS"
                  label="状态">
            <template slot-scope="scope">
              {{scope.row.STATUS ? '启用' : '禁用'}}
            </template>
          </el-table-column>
          <el-table-column
                  align="center"
                  width="180px"
                  prop="CREATETIME"
                  label="创建时间">
            <template slot-scope="scope">
              {{new Date(scope.row.CREATETIME).toLocaleString()}}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                :page-sizes="[10, 20, 30, 50, 100]"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog title="设置预期绩效" :visible.sync="dialogFormVisible2" width="50%" center>
      <el-form :model="form2" ref="form2">
        <el-row v-for="item in list">
          <el-divider>{{item.typeName}}</el-divider>
          <el-col :span="12">
            <el-form-item label="实训项目" :label-width="formLabelWidth">
              <el-input :disabled="isShow" size="mini" v-model="item.item" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总学时/每学年" :label-width="formLabelWidth">
              <el-input :disabled="isShow" size="mini" v-model="item.time" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-table :data="settingList" border>
              <el-table-column align="center" label="序号" width="55">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="名称" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.typeName" size="mini" :disabled="isShow" autocomplete="off" />
                </template>
              </el-table-column>
              <el-table-column label="实训项目" align="center">
                <template slot-scope="scope">
                  <el-input :disabled="isShow" size="mini" v-model="scope.row.item" autocomplete="off"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="总学时/每学年" align="center">
                <template slot-scope="scope">
                  <el-input :disabled="isShow" size="mini" v-model="scope.row.time" autocomplete="off"></el-input>
                </template>
              </el-table-column>
              <el-table-column v-if="!isShow" align="center" prop="created_at" label="操作" width="100">
                <template slot-scope="{row, $index}">
                  <el-button v-if="settingList.length === ($index + 1)" type="primary" size="mini" icon="el-icon-plus" circle @click="addRow('settingList', ['typeName', 'item', 'time'])" />
                  <el-button size="mini" icon="el-icon-minus" circle @click="rmRow('settingList', $index)" />
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "trainPerformance",
    data() {
      return{
        settingList: [{}],
        pagination: {
          pageSize: 20,
          total: 1,
          pageNo: 1
        },
        defaultProps: {
          children: 'list',
          label: 'NAME'
        },
        data: [],
        dialogImageUrl: '',
        dialogVisible: false,
        form2:{
          deviceName: [ {name: ''}, {num: 1212}]
        },
        formLabelWidth: '120px',
        dialogFormVisible2: false,
        formInline: {},
        tableData: [],
        testBase: [],
        node: {},
        selectId: [],
        list: [
          {
            typeName: '教学',
            item: '',
            time: ''
          },
          {
            typeName: '科研',
            item: '',
            time: ''
          },
          {
            typeName: '社会服务',
            item: '',
            time: ''
          },
          {
            typeName: '技能竞赛',
            item: '',
            time: ''
          },
          {
            typeName: '考证',
            item: '',
            time: ''
          },
          {
            typeName: '技能鉴定',
            item: '',
            time: ''
          }
        ],
        btnDisabled: true,
        isShow: false
      }
    },
    created() {
      this.getData();
      this.$post('/testBase/findTestBase').then(res => {
        this.testBase = res.data.data.dataList;
      });
      this.getTableData(this.pagination.pageSize, this.pagination.pageNo);
    },
    methods: {
      addRow(tabkey, params) {
        const row = this[tabkey][this[tabkey].length - 1]
        if (params.find(ites => !row[ites])) return this.$message({ type: 'error', message: '请先输入必填项' })
        this[tabkey].push({})
      },
      rmRow(tabkey, index) {
        console.log(index)
        if (this[tabkey].length > 1) {
          this[tabkey].splice(index, 1)
        } else {
          this.$message({ type: 'error', message: '最后一行不可删除' })
          this[tabkey] = [{}]
        }
      },
      getData() {
        this.$post('/public/findStructureByTest').then(res => {
          this.data = res.data.data;
        })
      },
      search() {
        this.$post('/testBase/findTest', {
          pageSize:this.pagination.pageSize,
          pageNo: 1,
          name: this.formInline.name,
          testBaseId: this.formInline.testBaseId,
          status: this.formInline.status
        }).then(res => {
          if(res.data.status != 1) {
            this.$message.error('条件输入错误，请检查');
            return;
          }
          this.pagination.total = res.data.data.total;
          this.tableData = res.data.data.dataList;
        })
      },
      submit() {
        this.$refs["form2"].validate(valid => {
          if (valid) {
            let typeName = [];
            let item = [];
            let time = [];
            const AllArr = [ ...this.list, ...(!this.settingList[0].typeName ? [] : this.settingList) ]
            for(let i = 0; i < AllArr.length; i++) {
              typeName.push(AllArr[i].typeName);
              item.push(AllArr[i].item);
              time.push(AllArr[i].time)
            }
            this.$post('/testBase/addTestExpect',
                    {
                      testId: this.selectId[0].ID,
                      typeName: typeName.join(),
                      item: item.join(),
                      time: time.join()
                    }).then(res => {
              console.log(res);
              if(res.data.status === 1) {
                this.$message.success(res.data.msg);
                this.dialogFormVisible2 = false;
              } else {
                this.$message.error(res.data.msg);
              }
            })
          }
        })
        //this.dialogFormVisible2 = false
      },
      setting(val) {
        this.$post('/testBase/findTestExpectByTestId', {testId: this.selectId[0].ID}).then(res => {
          if(val === 'view') {
            this.isShow = true;
          } else {
            this.isShow = false;
          }
          console.log(res.data.data.length > 6)
          this.settingList = (res.data.data.length > 6 ? res.data.data.splice(6, res.data.data.length - 6) : [{}]).map(it => ({
            typeName: it.TYPENAME || '',
            item: it.ITEM || '',
            time: it.TIME || '',
          }))
          if(res.data.data.length === 0) {
            for(let i = 0; i < this.list.length; i++) {
              this.list[i].item = '';
              this.list[i].time = '';
            }
            return;
          }
          for(let i = 0; i < res.data.data.length; i++){
            this.list[i].typeName = res.data.data[i].TYPENAME;
            this.list[i].item = res.data.data[i].ITEM;
            this.list[i].time = res.data.data[i].TIME;
          }
        });
        this.dialogFormVisible2 = true
      },
      getTableData(pageSize, pageNo) {
        this.$post('/testBase/findTest', {pageSize,pageNo}).then(res => {
          this.tableData = res.data.data.dataList;
          this.pagination.total = res.data.data.total;
        })
      },
      handleSelectionChange(val) {
        this.selectId = val;
        if(val.length === 1) {
          this.btnDisabled = false;
        } else {
          this.btnDisabled = true;
        }
      },
      handleSizeChange(size) {
        this.pagination.pageSize = size;
        this.getTableData(size, this.pagination.pageNo);
      },
      handleCurrentChange(page) {
        this.pagination.pageNo = page;
        this.getTableData(this.pagination.pageSize, page);
      },
      handleNodeClick(data, node) {
        this.node = node;
        let buildingId = '';
        let classroomId = '';
        if(node.level === 1) {
          buildingId = node.data.ID;
        } else {
          buildingId = '';
        }
        if(node.level === 2) {
          classroomId = node.data.ID;
        } else {
          classroomId = '';
        }
        this.$post('/testBase/findTest',
                {
                  pageSize: this.pagination.pageSize,
                  pageNo: 1,
                  buildingId: buildingId,
                  classroomId: classroomId
                }
        ).then(res => {
          this.tableData = res.data.data.dataList;
          this.pagination.total = res.data.data.total;
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .search{
    margin-bottom: 10px;
  }
  /deep/.el-select{
    width: 100%;
  }
  .addDev {
    /deep/.el-form-item__content {
      display: flex;
    }
  }
  /deep/.el-divider{
    background: #409eff;
  }
  /deep/.el-divider__text{
    font-size: 16px;
    font-weight: bold;
    color: #409eff;
  }
  .el-divider--horizontal {
    margin: 10px 0;
  }
</style>
